<template>
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view class="image-eight-Three">
		<my-img-y-Three class="item" :checkbox="checkbox" @checkbox="oncheckbox" v-for="(item , index) in collentValue"
			:index="index" :key="item.collection[0].id" :images="item.collection[0].imageUrl"
			:tags="item.collection[0].tags" :name="item.collection[0].name" :bifen="item.collection[0].bifen"
			:biao="item.collection[0].biao" :episode="item.collection[0].episode"
			:episodes="item.collection[0].episodes" :urlId="item.collection[0].id"></my-img-y-Three>
	</view>

	<view class="deleteB" @click="ondeleteClick">{{deleteContent}}</view>

	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view>到此为止...</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		collectionCollent,
		CollentDelete
	} from '@/API/geidApis.js';
	const loading = ref(true)
	const collentValue = ref([]); //收藏的内容
	const deleteContent = ref('编辑'); //编辑按钮初始值
	const checkbox = ref(false); //取消按钮的开关

	// 收藏内容
	const collentFunction = async () => {
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		// #endif
		console.log("user信息：", user)
		let res = await collectionCollent(user.id);
		collentValue.value = res;
		console.log("收藏内容：", res);

		loading.value = false
	}
	// 收藏内容
	collentFunction();

	// 取消收藏的内容
	const oncheckbox = async (e) => {
		uni.showLoading({
			title: '删除中'
		})
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		// #endif
		// console.log("oncheckbox:", e);
		let item = collentValue.value; // 获取当前的视频数组
		// console.log("collentValue.value[e].collection[0].id:", collentValue.value[e].videoId);
		let res = await CollentDelete(user.id, collentValue.value[e].videoId); //从数据库中删除
		console.log("删除：", res);
		if (res > 0) {
			uni.hideLoading();
			item.splice(e, 1); // 从索引位置删除 1 个元素
			uni.showToast({
				title: "已删除！",
				icon: "none"
			})
		} else {
			uni.hideLoading();
			uni.showToast({
				title: '失败',
				icon: "error"
			})
		}

	}

	// 点击’编辑‘按钮
	function ondeleteClick(e) {
		console.log("点击了")
		if (checkbox.value) {
			checkbox.value = false
			deleteContent.value = '编辑'

		} else {
			checkbox.value = true;
			deleteContent.value = '不了'
		}
	}
</script>

<style scoped lang="scss">
	.image-eight-Three {
		margin-top: 20rpx;
		padding: 0 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);

		.item {
			overflow: hidden;
			/* 防止内容溢出 */
			position: relative;
			width: 100%;
			/* 图片宽度填充整个容器 */
			height: auto;
			/* 根据宽度自动调整高度 */
			display: block;
			/* 移除图片下方默认的空白间隙 */
			object-fit: cover;
			/* 保证图片完全覆盖容器，可能会裁剪图片 */
		}
	}

	.deleteB {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff0000;
		width: 250rpx;
		height: 80rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>